<template>
    <view class="container">
        <view class="header">
            <view class="user-info">
                <image 
                    :src="userInfo.avatarUrl" 
                    class="avatar"
                ></image>
                <text class="username">{{ userInfo.nickName }}</text>
            </view>
            <button 
                class="record-btn" 
                @tap="navigateToRecord"
            >
                <text class="iconfont icon-add">+</text>
                记录心情
            </button>
        </view>

        <view class="mood-summary">
            <view class="summary-card">
                <text class="card-title">今日心情</text>
                <view class="mood-status">
                    <text class="mood-level">{{ todayMood.level }}</text>
                    <text class="mood-description">{{ todayMood.description }}</text>
                </view>
            </view>
        </view>

        <view class="recent-records">
            <view class="section-title">
                <text>最近记录</text>
                <navigator 
                    url="/pages/history/index" 
                    class="more-link"
                >
                    查看全部
                </navigator>
            </view>
            <scroll-view 
                scroll-x 
                class="records-scroll"
            >
                <view 
                    v-for="record in recentRecords" 
                    :key="record.id" 
                    class="record-item"
                    @tap="navigateToDetail(record.id)"
                >
                    <text class="record-date">{{ record.date }}</text>
                    <text class="record-mood">{{ record.mood }}</text>
                </view>
            </scroll-view>
        </view>

        <view class="ai-report">
            <view class="section-title">AI情绪报告</view>
            <view class="report-card">
                <text class="report-text">{{ aiReport }}</text>
                <navigator 
                    url="/pages/report/index" 
                    class="view-report-btn"
                >
                    查看详细报告
                </navigator>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {},
            todayMood: {
                level: '一般',
                description: '今天的心情平平'
            },
            recentRecords: [],
            aiReport: '根据您最近的心情记录，AI分析您的情绪状态相对稳定。'
        }
    },
    onLoad() {
        this.loadUserInfo();
        this.fetchTodayMood();
        this.fetchRecentRecords();
        this.fetchAIReport();
    },
    methods: {
        loadUserInfo() {
            this.userInfo = uni.getStorageSync('userInfo') || {};
        },
        async fetchTodayMood() {
            try {
                const mood = await this.$api.mood.getTodayMood();
                this.todayMood = mood;
            } catch (error) {
                console.error('获取今日心情失败', error);
            }
        },
        async fetchRecentRecords() {
            try {
                const records = await this.$api.mood.getRecentRecords();
                this.recentRecords = records;
            } catch (error) {
                console.error('获取最近记录失败', error);
            }
        },
        async fetchAIReport() {
            try {
                const report = await this.$api.ai.getLatestReport();
                this.aiReport = report;
            } catch (error) {
                console.error('获取AI报告失败', error);
            }
        },
        navigateToRecord() {
            uni.navigateTo({
                url: '/pages/record/index'
            });
        },
        navigateToDetail(id) {
            uni.navigateTo({
                url: `/pages/history/detail?id=${id}`
            });
        }
    }
}
</script>

<style scoped>
.container {
    background-color: #F8F8F8;
    height: 100vh;
    padding: 24px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.user-info {
    display: flex;
    align-items: center;
}

.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
}

.username {
    font-size: 18px;
    font-weight: 600;
}

.record-btn {
    background-color: #E6F4EA;
    color: #1AAD19;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    display: flex;
    align-items: center;
}

.record-btn .iconfont {
    margin-right: 4px;
}

.mood-summary {
    margin-bottom: 24px;
}

.summary-card {
    background-color: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-title {
    font-size: 16px;
    color: #666;
    margin-bottom: 12px;
}

.mood-status {
    display: flex;
    align-items: center;
}

.mood-level {
    font-size: 24px;
    font-weight: 600;
    margin-right: 12px;
}

.mood-description {
    color: #666;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.more-link {
    color: #1AAD19;
    font-size: 14px;
}

.records-scroll {
    white-space: nowrap;
    overflow-x: auto;
}

.record-item {
    display: inline-block;
    background-color: white;
    border-radius: 8px;
    padding: 12px;
    margin-right: 12px;
    width: 120px;
}

.record-date {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.record-mood {
    font-size: 16px;
    font-weight: 500;
}

.ai-report {
    margin-top: 24px;
}

.report-card {
    background-color: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.report-text {
    display: block;
    margin-bottom: 12px;
    color: #333;
}

.view-report-btn {
    display: inline-block;
    background-color: #E6F4EA;
    color: #1AAD19;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
}
</style> 